<script setup lang="ts">
import { ref } from "vue";
import { formRules } from "../utils/types";
import { FormProps, TrainingCategoryOptions } from "../utils/types";

interface FormItemProps {
  id?: string;
  title: string;
  description: string;
  category: string;
  instructorId: number;
  instructorName: string;
  maxStudents: number;
  currentStudents: number;
  price: number;
  originalPrice: number;
  startTime: string;
  endTime: string;
  duration: number;
  location: string;
  address: string;
  status: number;
  level: number;
  tags: string;
  coverImage: string;
  content: string;
  requirements: string;
  objectives: string;
  schedule: string;
  materials: string;
  certificate: boolean;
  remark: string;
  createTime?: string;
  updateTime?: string;
}

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: "",
    title: "",
    description: "",
    category: "",
    instructorId: 0,
    instructorName: "",
    maxStudents: 20,
    currentStudents: 0,
    price: 0,
    originalPrice: 0,
    startTime: "",
    endTime: "",
    duration: 0,
    location: "",
    address: "",
    status: 0,
    level: 1,
    tags: "",
    coverImage: "",
    content: "",
    requirements: "",
    objectives: "",
    schedule: "",
    materials: "",
    certificate: false,
    remark: "",
    createTime: "",
    updateTime: ""
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="100px"
  >
    <el-row :gutter="30">
      <el-col :xs="24" :sm="12">
        <el-form-item label="培训标题" prop="title">
          <el-input
            v-model="newFormInline.title"
            clearable
            placeholder="请输入培训标题"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-form-item label="培训分类" prop="category">
          <el-select
            v-model="newFormInline.category"
            placeholder="请选择培训分类"
            class="w-full"
          >
            <el-option
              v-for="item in TrainingCategoryOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-form-item label="讲师姓名" prop="instructorName">
          <el-input
            v-model="newFormInline.instructorName"
            clearable
            placeholder="请输入讲师姓名"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-form-item label="培训级别" prop="level">
          <el-select
            v-model="newFormInline.level"
            placeholder="请选择培训级别"
            class="w-full"
          >
            <el-option label="初级" :value="1" />
            <el-option label="中级" :value="2" />
            <el-option label="高级" :value="3" />
            <el-option label="专家级" :value="4" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-form-item label="最大学员数" prop="maxStudents">
          <el-input-number
            v-model="newFormInline.maxStudents"
            :min="1"
            :max="1000"
            placeholder="请输入最大学员数"
            class="w-full"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-form-item label="培训价格" prop="price">
          <el-input-number
            v-model="newFormInline.price"
            :min="0"
            :precision="2"
            placeholder="请输入培训价格"
            class="w-full"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-form-item label="原价" prop="originalPrice">
          <el-input-number
            v-model="newFormInline.originalPrice"
            :min="0"
            :precision="2"
            placeholder="请输入原价"
            class="w-full"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-form-item label="培训时长" prop="duration">
          <el-input-number
            v-model="newFormInline.duration"
            :min="1"
            placeholder="请输入培训时长（小时）"
            class="w-full"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker
            v-model="newFormInline.startTime"
            type="datetime"
            placeholder="请选择开始时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            class="w-full"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker
            v-model="newFormInline.endTime"
            type="datetime"
            placeholder="请选择结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            class="w-full"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-form-item label="培训地点" prop="location">
          <el-input
            v-model="newFormInline.location"
            clearable
            placeholder="请输入培训地点"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-form-item label="详细地址" prop="address">
          <el-input
            v-model="newFormInline.address"
            clearable
            placeholder="请输入详细地址"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-form-item label="培训状态" prop="status">
          <el-select
            v-model="newFormInline.status"
            placeholder="请选择培训状态"
            class="w-full"
          >
            <el-option label="草稿" :value="0" />
            <el-option label="已发布" :value="1" />
            <el-option label="进行中" :value="2" />
            <el-option label="已完成" :value="3" />
            <el-option label="已取消" :value="4" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-form-item label="标签" prop="tags">
          <el-input
            v-model="newFormInline.tags"
            clearable
            placeholder="请输入标签，用逗号分隔"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-form-item label="封面图片" prop="coverImage">
          <el-input
            v-model="newFormInline.coverImage"
            clearable
            placeholder="请输入封面图片URL"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-form-item label="颁发证书">
          <el-switch
            v-model="newFormInline.certificate"
            active-text="是"
            inactive-text="否"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24">
        <el-form-item label="培训描述" prop="description">
          <el-input
            v-model="newFormInline.description"
            :autosize="{ minRows: 2, maxRows: 4 }"
            type="textarea"
            placeholder="请输入培训描述"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24">
        <el-form-item label="培训内容" prop="content">
          <el-input
            v-model="newFormInline.content"
            :autosize="{ minRows: 3, maxRows: 6 }"
            type="textarea"
            placeholder="请输入培训内容详情"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24">
        <el-form-item label="报名要求" prop="requirements">
          <el-input
            v-model="newFormInline.requirements"
            :autosize="{ minRows: 2, maxRows: 4 }"
            type="textarea"
            placeholder="请输入报名要求"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24">
        <el-form-item label="培训目标" prop="objectives">
          <el-input
            v-model="newFormInline.objectives"
            :autosize="{ minRows: 2, maxRows: 4 }"
            type="textarea"
            placeholder="请输入培训目标"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24">
        <el-form-item label="课程安排" prop="schedule">
          <el-input
            v-model="newFormInline.schedule"
            :autosize="{ minRows: 2, maxRows: 4 }"
            type="textarea"
            placeholder="请输入课程安排"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24">
        <el-form-item label="培训材料" prop="materials">
          <el-input
            v-model="newFormInline.materials"
            :autosize="{ minRows: 2, maxRows: 4 }"
            type="textarea"
            placeholder="请输入培训材料"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24">
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="newFormInline.remark"
            :autosize="{ minRows: 2, maxRows: 4 }"
            type="textarea"
            placeholder="请输入备注信息"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>